<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body, html
        {
            height: 100%;
        }
        body {
            background-image:url("images/back.jpg");
            padding:35px 0 0;
            margin:auto;
            background-size: cover;
            background-attachment: fixed;
        }
        .button{
            width: 100px;
            height: 30px;
            font-weight: bolder;
            font-size: larger;
            border-radius: 4px;
            background-color: #008B8B;
        }
        .container {
            width:1000px;
            height:550px;
            margin:30px auto;
            position:relative;
        }
        img {
            /*宽度可以根据自己选择的照片内容而定*/
            width:150px;
        }
        .container img:hover {
            transform: scale(1.8);
            transition: all .65s;
            overflow: hidden;
            box-shadow:15px 15px 20px rgba(50,50,50,0.4);
            z-index:2;
        }
        .container img {
            /*给照片加一个相框的效果*/
            padding: 10px 10px 15px;
            background-color: white;
            border: 1px solid #ddd;
            box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
            /*渐出动画效果*/
            transition: all 0.5s ease-in;
            z-index: 1;
        }
        .img1 {
            left:400px;
            top:0;
            transform:rotate(5deg);
        }

        .img2 {
            left:600px;
            top:0;
            transform:rotate(-20deg);
        }
        .img3 {
            bottom:0px;
            right:0;
            transform:rotate(5deg);
        }

        .img4 {
            bottom:400px;
            left:300px;
            transform:rotate(-10deg);
        }

        .img5 {
            bottom:0px;
            top:0;
            transform:rotate(-10deg);
        }

        .img6 {
            left:0px;
            top:0;
            transform:rotate(10deg);
        }
        .img7 {
            left:850px;
            top:0;
            transform:rotate(-20deg);
        }
        .img8 {
            bottom:-20px;
            top:650px;
            transform:rotate(5deg);
        }
        .img9 {
            left:550px;
            top:100px;
            transform:rotate(15deg);
        }
        .img10{
            left:0px;
            top:0px;
            transform:rotate(-20deg);
        }
        .footer {
            height: 40px;
            line-height: 40px;
            position: absolute;
            width: 100%;
            text-align: center;
            color: #000;
            font-family: Arial;
            font-size: 20px;
            letter-spacing: 1px;
            clear: both;
        }
    </style>
    <script type="text/javascript">
        window.onload = function (){
            var info = ["","","","","","","","","",""];
            info[0] += "\n一九七月的初见\n"+"定格在十指之间\n";
            info[1] += "\n八月酷暑武功山\n"+"落日下的你更仙\n";
            info[2] += "\n武功山上与卿渡\n"+"遥看日落盼日出\n";
            info[3] += "\n武功山上与卿渡\n"+"遥看日落盼日出\n";
            info[4] += "\n月色皎洁的夜晚\n"+"携手赏南大风景\n";
            info[5] += "\n考完解放后的宝\n"+"捧着花儿笑开颜\n";
            info[6] += "\n镜头下你的很美\n"+"现实中的你更美\n";
            info[7] += "\n陪你一起看夕阳\n"+"对着夕阳比个心\n";
            info[8] += "\n考完解放后的宝\n"+"捧着花儿笑开颜\n";
            info[9] += "\n驻足欣赏眼前景\n"+"黄昏的南大晚霞\n";
            for (let i = 0; i < 10; i++) {
                document.getElementById("img"+(i+1)).onclick = function (){
                    alert(info[i])
                    location=location
                }
            }
        }
    </script>
</head>
<body>
<input class="button" name="Submit " type="submit" value="返回" onclick="javascript:history.back()" />
    <div class="container">
        <img class="img1" id="img1" src="images/photo1.jpg" />
        <img class="img2" id="img2" src="images/photo2.jpg" />
        <img class="img3" id="img3" src="images/photo3.jpg" />
        <img class="img4" id="img4" src="images/photo4.jpg" />
        <img class="img5" id="img5" src="images/photo5.jpg" />
        <img class="img6" id="img6" src="images/photo6.jpg" />
        <img class="img7" id="img7" src="images/photo7.jpg" />
        <img class="img8" id="img8" src="images/photo8.jpg" />
        <img class="img9" id="img9" src="images/photo9.jpg" />
        <img class="img10" id="img10" src="images/photo10.jpg" />
    </div>
<div class="footer">
    ©2020-2021 谢娇(6109118015) 版权所有
</div>
</body>
</html>